<template>
  <van-space style="margin: 15px 20px">
    <div class="image" style="height: 115px">
      <van-image
          round
          width="7rem"
          height="7rem"
          :src="user.avatarUrl"
      />
    </div>
    <van-cell :title="user.username" style="width: 100%;font-size: 0.99rem;">
      <template #label>
        <van-text-ellipsis :content="user.profile ?? '用户未编辑个性签名'" style="margin-top: 20px"/>
      </template>
    </van-cell>
  </van-space>
  <van-cell center>
    <template #title>
      <span style="margin-left: 20px">标签</span>
    </template>
    <template #value>
      <van-tag v-for="tag in user.tags" plain type="danger"
               style="margin-right: 8px;margin-top: 8px">
        {{ tag }}
      </van-tag>
    </template>
  </van-cell>
  <div style="margin-left: 10px; margin-right: 10px">
    <van-cell title="昵称" :value="user.username" icon="manager-o"/>
    <van-cell title="性别">
      <template #title>
        <van-icon class="iconfont" class-prefix="icon" name="xingbie"/>
        <span>性别</span>
      </template>
      <!-- 使用 right-icon 插槽来自定义右侧图标 -->
      <template #right-icon>
        <van-icon class="iconfont" class-prefix="icon" v-if="user.gender"
                  :name="userGender[user.gender]" size="20px"/>
        <span v-else>未设置</span>
      </template>
    </van-cell>
  </div>
  <div style="margin: 30px 16px;">
    <van-button v-if="isFriend"
                style="margin-top: 10px" round block type="primary"
                native-type="submit" color="red"
                @click="deleteFriend">删除好友
    </van-button>
    <van-button v-else
                style="margin-top: 10px" round block type="primary"
                native-type="submit" color="blue"
                @click="openRemark">请求添加好友
    </van-button>
  </div>
  <Dialog v-model:show="showPasswordDialog" title="备注"
          :show-cancel-button="true" @confirm="addFriend">
    <van-field
        v-model="remark"
        rows="1"
        autosize
        type="textarea"
    />
  </Dialog>
</template>

<script setup lang="ts">

import {useRoute} from "vue-router";
import {userVO} from "../models/user";
import myAxios from "../plugins/myAxios";
import {ResponseResult} from "../models/resopnse";
import {onMounted, ref} from "vue";
import {Dialog, showFailToast, showSuccessToast} from "vant";

const userGender: { [status: number]: string } = {
  0: 'nansheng',
  1: 'nvsheng',
}

const route = useRoute()
const id = route.query.id;

const isFriend = ref<boolean>(false)

const user = ref<userVO>({
  createTime: undefined,
  email: "",
  gender: 0,
  id: 0,
  phone: "",
  tags: [],
  userAccount: "",
  userRole: 0,
  username: ""
})

onMounted(() => {
  loadData()
  checkIsFriend()
})


/**
 * 加载数据
 */
const loadData = async () => {
  const res: ResponseResult<userVO> = await myAxios.get('/user/userinfoVO', {
    params: {
      id,
    }
  })
  if (res.code === 0 && res.data) {
    user.value = res.data
    user.value.tags = JSON.parse(user.value.tags as any)
  } else {
    showFailToast(res.description ?? res.message)
  }
}
/**
 * 判断是否为好友
 */
const checkIsFriend = async () => {
  const res: ResponseResult<boolean> = await myAxios.get('/user/isFriend', {
    params: {
      id
    }
  })
  if (res.code === 0) {
    isFriend.value = res.data
  } else {
    showFailToast(res.description ?? res.message)
  }
}

/**
 * 删除好友
 */
const deleteFriend = async () => {
  const res: ResponseResult<boolean> = await myAxios.delete('/user/friends/delete', {
    params: {
      id
    }
  })
  if (res.code === 0 && res.data) {
    showSuccessToast('删除好友成功')
    isFriend.value = false
  } else {
    showFailToast('删除好友失败')
    showFailToast(res.description ?? res.message)
  }
}

const showPasswordDialog = ref<boolean>(false)
const remark = ref<string>('')
const openRemark = () => {
  showPasswordDialog.value = true
}
/**
 * 添加好友
 */
const addFriend = async () => {
  const res: ResponseResult<boolean> = await myAxios.post('/friends/add', {
    receiveId: id,
    remark: remark.value,
  })
  if (res.code === 0 && res.data) {
    showSuccessToast('添加好友请求发送成功')
  } else {
    showFailToast('添加好友请求发送失败')
    showFailToast(res.description ?? res.message)
  }
  showPasswordDialog.value = false
}

</script>

<style scoped></style>
